<template>
  <div class="error">
    <div class="error-flex">
      <div class="left">
        <div class="left-item">
          <div class="left-item-animation left-item-num">404</div>
          <div class="left-item-animation left-item-title">地址输入错误，请重新输入地址~</div>
          <div class="left-item-animation left-item-msg">您可以先检查网址，然后重新输入或给我们反馈问题。</div>
          <div class="left-item-animation left-item-btn">
            <el-button @click="onGoHome" round type="primary">返回首页</el-button>
          </div>
        </div>
      </div>
      <div class="right">
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'not-found',
    data() {
      return {}
    },
    methods: {
      onGoHome() {
        this.$router.push('/')
      }
    }
  }
</script>

<style lang="less" scoped>
  .error {
    display: flex;
    height: 100%;
  }

  .error-flex {
    margin: auto;
    display: flex;
    height: 250px;
  }

  .left-item-num {
    color: #909399;
    font-size: 55px;
  }

  .left-item-title {
    font-size: 20px;
    margin: 15px 0 5px 0;
    animation-delay: 0.1s;
  }

  .left-item-msg {
    color: rgba(0, 0, 0, 0.45);
    font-size: 12px;
    margin-bottom: 30px;
  }
</style>
